<template>
    <div style="margin-top: 10px">
      <el-tag class="org-item" 
             v-for="(item, index) in _value" :key="index + '_org'"
      >
        <span v-if="item.name">
          <el-avatar size="small" :src="item.avatar"/>
        <span> {{ item.name }}</span>
        </span>
        <span v-else-if="item.roleName" style="display: inline-flex;align-items: center;">
            <el-avatar size="small" style="background-color: #409eff;">
              {{ item.roleName.substr(0, 1) }}
            </el-avatar>
            <span> {{ item.roleName }}</span>
        </span>
        <span v-else-if="item.departName">
             <el-avatar size="small" >
          {{ item.departName.substr(0, 1) }}
        </el-avatar>
          <span> {{ item.departName }}</span>
        </span>
        <!-- <vxe-button icon="fa fa-trash-o" round circle type="text" status="danger" @click="removeOrgItem(index)"
                    size="mini">X</vxe-button> -->
                    <i class="el-icon-delete" style="color: #f56c6c;" @click="removeOrgItem(index)"></i>
      </el-tag>
      <vxe-button v-if="_value.length>0" icon="fa fa-trash-o" round circle type="text" status="danger"
                  @click="removeAllOrgItem" size="mini">全部移除
      </vxe-button>
    </div>
  </template>
  
  <script>
  export default {
    name: "OrgItems",
    components: {},
    props: {
      type: {
        default: 'user', //org选择部门/人员  user-选人  dept-选部门 role-选角色
        type: String
      },
      value: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    computed: {
      _type: {
        get() {
          let type = this.type;
          return type
        },
      },
      _value: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit("input", val);
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      removeOrgItem(index) {
        this._value.splice(index, 1)
      },
      removeAllOrgItem() {
        this._value = []
      },
    },
    created(){
    }
  }
  </script>
  
  <style scoped>
  .org-item {
    margin: 5px;
  }
  </style>
  